@use 'fonts'

%box
  padding: 2mm
  &::before
    margin-right: 2mm

a
  color: #0e0
  text-decoration: none

a[href^="http://"], a[href^="https://"]
  &::after
    content: " ➚"

a[href^="https://en.wikipedia.org/"]
  &::after
    content: " Ⓦ"

a[href^="mailto:"]
  &::after
    content: " ✉"
    font-weight: 900

a.no-icon
  &::after
    content: ""

body
  width: min(800px, calc(100% - 8px))
  margin: auto
  overflow-x: auto
  background-color: #000
  color: #fff
  font-family: fonts.$serif
  font-size: 12pt
  text-align: justify
  line-height: 1.4

button
  background-color: #222
  color: #fff
  border: none
  padding: 0.5rem
  font-weight: 600
  font-family: fonts.$sans-serif
  cursor: pointer

figure
  display: flex
  flex-direction: column
  align-items: center
  figcaption
    color: #999
    font-size: 10pt

h1, h2, h3, h4, h5, h6
  color: #f80
  font-family: fonts.$sans-serif

header
  display: flex
  flex-direction: row
  align-items: center
  justify-content: center
  margin-top: 1cm
  margin-bottom: 1cm
  font-size: 36pt

input[type="text"], input[type="number"]
  background-color: #111
  color: #fff
  border: none

pre
  overflow-x: auto
  padding: 2mm

pre, code
  background-color: #002

textarea
  background-color: #111
  color: #fff
  border: none

.comparison
  display: flex
  flex-direction: row
  flex-wrap: wrap
  align-items: flex-start
  .compared
    border: 2px solid #777
    padding: 2mm
    h6
      margin: 0
      color: #ff0
      font-size: 12pt

.disclaimer
  @extend %box
  &::before
    content: "⚠"
  background-color: #700

.error
  color: #f00

.index
  list-style-type: "→ "

.notice
  @extend %box
  &::before
    content: "🛈"
  background-color: #007

.qa
  dt
    color: #f8f

.quote
  figcaption
    text-align: right

.warning
  @extend %box
  &::before
    content: "⚠"
  background-color: #440

.wip
  &::after
    content: " [WIP]"
  color: #777
  a
    color: #090

.xigoi
  font-style: normal
  color: #f80
